
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>程序员可以用Cursor给自己壮胆 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>程序员可以用Cursor给自己壮胆 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">根据文档描述，Cursor是一款什么样的编程工具，其核心能力体现在哪些方面？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cursor是一款基于AI技术的编程工具，定位为一位24小时在线的编程助手。其核心能力基于强大的AI模型，能够理解用户的编程意图，并提供代码补全、解释代码逻辑、进行代码重构以及回答各种编程问题。</div>
          </div>
          <div class="card-source">来源: 一、初识Cursor -> 1. Cursor是什么</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">文档中提到，中国大陆的程序员在使用Cursor时享有哪些特殊的优势？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">主要有两个特殊优势：第一，Cursor支持中文交流，用户可以用母语向AI提问，降低了沟通障碍；第二，Cursor对国内常用的技术栈如Spring Boot、MyBatis、Dubbo和阿里巴巴的Sentinel等有很好的支持，能够理解并提供相关的建议。</div>
          </div>
          <div class="card-source">来源: 一、初识Cursor -> 3. 中国程序员使用Cursor的特殊优势</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当代码出现Spring Boot中的循环依赖问题时，Cursor能够诊断并提供哪几种具体的修复方案？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cursor不仅能指出循环依赖问题，还提供了四种修复方案：1. 重构代码，消除循环依赖；2. 使用@Lazy注解延迟初始化其中一个依赖；3. 将其中一个依赖改为setter注入；4. 提取共同功能到第三个服务中。</div>
          </div>
          <div class="card-source">来源: 二、Cursor让编码不再恐惧 -> 3. Bug诊断</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">在代码审查（Code Review）场景下，Cursor可以从哪些方面帮助审查者发现潜在问题？请至少列举三项。</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在审查一段Spring Boot控制器代码时，Cursor能够指出多个改进点，例如：1. 缺少异常处理（如用户不存在时应返回404）；2. 未使用推荐的构造器注入依赖；3. 直接返回实体类而非DTO，可能暴露敏感信息；4. 缺少输入验证；5. 创建成功后应返回201状态码而不是默认的200。</div>
          </div>
          <div class="card-source">来源: 四、团队协作中的Cursor神助攻 -> 1. 代码审查的得力助手</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在准备技术面试的算法题时，Cursor如何以非直接给答案的方式提供帮助？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Cursor可以提供解题思路的指导框架，而不是直接给出完整答案。例如，在处理“查找数据库中第二高的薪水”问题时，它会给出思考框架，提示用户可以考虑使用ORDER BY和LIMIT子句、处理NULL值、使用子查询或DENSE_RANK()函数等，从而引导用户自己思考和实现。</div>
          </div>
          <div class="card-source">来源: 三、用Cursor武装自己的技术面试 -> 2. Cursor的解题思路指导</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">为了避免对Cursor产生过度依赖，成为“复制粘贴工程师”，文档中提倡了什么样的使用原则？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档提倡“理解原理先于使用工具”的原则。具体做法是，在让Cursor生成代码之前，先让它解释相关技术的核心概念和工作原理。在理解了原理之后，再尝试自己实现或使用工具生成代码，这样能确保真正掌握技术本身。</div>
          </div>
          <div class="card-source">来源: 六、让Cursor成为助力 -> 1. 理解原理先于使用工具</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Cursor的“让AI理解你的整个代码库”这一进阶功能有什么作用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该功能通过让Cursor索引整个项目代码库，使其能够理解项目的整体结构，包括实体间的关系、服务间的依赖以及配置信息。这使得Cursor能够基于完整的项目上下文，提供更加精准的代码建议和问题解答。</div>
          </div>
          <div class="card-source">来源: 七、Cursor使用进阶技巧 -> 2. 让AI理解你的整个代码库</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当需要为已有代码生成技术文档时，Cursor是如何提供帮助的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">用户可以在代码方法前添加注释，要求Cursor生成标准的JavaDoc文档。Cursor会分析方法的功能、参数、返回值和可能抛出的异常，并生成一份规范的文档，包含功能描述、各参数（@param）的说明、返回值（@return）的说明以及异常（@throws）的说明等。</div>
          </div>
          <div class="card-source">来源: 四、团队协作中的Cursor神助攻 -> 3. 技术文档生成</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档中描述的“对话式学习”是如何利用Cursor来学习新技术的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">“对话式学习”是一种与Cursor进行互动来学习的方式。学习者可以先提出一个较宽泛的问题（例如关于Java并发锁机制），在得到初步回答后，可以针对其中的细节或不理解的部分进行追问（例如ReentrantLock与synchronized的具体区别和案例），通过这种持续的问答交互来深入、有针对性地掌握新知识。</div>
          </div>
          <div class="card-source">来源: 五、Cursor辅助学习的正确姿势 -> 1. 与Cursor对话学习</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
